<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cart</title>

    <!----------引入css----------->
    <!--引入bootstrap css-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="my/css/cart.css">

    <!-----------引入js----------->
    <!--引入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!--引入bootstrap js-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--引入veu-->
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/header.css">

    <link rel="stylesheet" href="css/order.css">

</head>
<body>

<div class="cart">
    <!--头部分-->
    <header>
        <myheader id="tagsApp" :category="category" :user="user"></myheader>
    </header>
    <!--主体部分-->
    <main class="container-fluid">
        <div class="row">
            <!--主体占位-->
            <div class="col-md-10 col-md-offset-1">
                <!--主体上部分-->
                <div class="col-md-12  cart-main-top">
                    <div class="col-md-2 cartname">
                        <span class="label label-primary">确认订单</span>
                    </div>
                    <div class="col-md-1 col-md-offset-9">
                        <button type="button" class="btn btn-success continue-shopping"><a href="#">继续购物</a></button>
                    </div>

                </div>
                <!--主体下部分-->
                <div class="col-md-12" id="checkoutApp">
                    <!--购物车-->
                    <div class="col-md-8 cart-solid">
                        <div id="address-header">收货地址</div>
                        <div class="address-list">
                            <div class="address-item" onclick="setAddressActive(this)" v-for="(address,index) in addresses">
                                <div class="address-info">
                                    <span class="address-id" style="display: none" v-text="address.id">1</span>
                                    <div class="name" v-text="address.customerName">张三</div>
                                    <div class="tel" v-text="address.phone">13911112222</div>
                                    <div class="address-con">
                                        <span v-text="address.provinceName">福建</span>
                                        <span v-text="address.cityName">厦门市</span>
                                        <span v-text="address.zoneName">湖里区</span>
                                        <span v-text="address.street">江头街道后埔xxx号</span>
                                    </div>
                                    <div class="address-action" @click="initUpdateAddressForm(address,index)"><span>修改</span></div>
                                </div>
                            </div>

                            <div class="add-address-item" onclick="toAddAddressWinFn()" id="addAddress">
                                <div class="add-desc"><i class="glyphicon glyphicon-plus"></i><span>添加新地址</span></div>
                            </div>

                        </div>
                        <table class="shop_table cart" style="width:100%;">
                            <!--表头-->
                            <thead>
                            <tr style="height: 50px">
                                <th class="" colspan="3">商品</th>
                                <th class="">价格</th>
                                <th class="" width="150px">数量</th>
                                <th class="">合计</th>
                            </tr>
                            </thead>
                            <!--表体-->
                            <tbody v-for="(items,index) in cart.cartItemsVOList">
                            <tr style="height: 100px">
                                <th class=" ">
                                </th>
                                <th class=" " width="100px">
                                    <img height="90px" width="90px" src="image/1.png" :src="items.image">
                                </th>
                                <th class="" v-text="items.itemsName">茉莉花茶</th>
                                <th class="">￥<span v-text="items.utilPrice"></span></th>
                                <th class="">
                                    <div class="quantity buttons_added">
                                        <span class="qty" v-text="items.itemsCount">1</span>
                                    </div>
                                </th>
                                <th class=" " width="100px">￥<span v-text="items.total"></span></th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--结算-->
                    <div class="col-md-4">
                        <div>
                            <table class="cart-total table" style="width: 100%">
                                <thead>
                                <tr>
                                    <th colspan="2">购物车总计</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>购物车小计</td>
                                    <td class="td-right">￥<span v-text="cart.cartTotal"></span></td>
                                </tr>
                                <tr>
                                    <td>运费</td>
                                    <td class="td-right">免费配送</td>
                                </tr>
                                <tr>
                                    <td>订单总计</td>
                                    <td class="td-right">￥<span v-text="cart.orderTotal"></span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12">
                            <button type="button" onclick="createOrder()" class="btn btn-info" style="width: 100%">去结算</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </main>
    <!--尾部-->
    <footer></footer>
</div>

<!-- 修改地址弹窗 -->
<div style="display: none;">
    <div class="address-form cus-win-model" id="updateAddressForm">
        <form class="form-horizontal" method="post" @submit.prevent="updateAddress(addressIndex)">
        <div class="dialog_header">
            <span class="dialog_title">修改收货地址</span>
            <span class="cus-win-modelclose js-closewin-btn"><i class="glyphicon glyphicon-remove font-14"></i></span>
        </div>
            <div class="address-form-content" >
                <div id="js_update_address_form" class="form-ele-box">
                    <div class="alert alert-danger" v-show="hasError">
                        <i class="fa fa-exclamation-triangle"></i> <span v-text="message" >邀请码错误！</span>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="addressId" :value="addressId" />
                        <span class="label-span"><span class="required">*</span> <label>地址信息:</label></span>
                        <ul class="list-inline ">
                            <li>
                                <select required="required" name="provinceName" class="form-control bor1"  v-model="provinceActive" @change="getCitys($event)" >
                                    <option value=""  disabled selected   >省</option>
                                    <option v-for="(province,index) in provinces"  :value="province.provinceName"  :key="index"
                                    >
                                        {{province.provinceName}}
                                    </option>
                                </select>
                            </li>
                            <li>
                                <select required="required" name="cityName" class="form-control bor1" v-model="cityActive" @change="getZones($event)" >
                                    <option value=""  disabled selected   >市</option>
                                    <option v-for="(city,index) in citys" :value="city.cityName"  :key="index">
                                        {{city.cityName}}
                                    </option>
                                </select>
                            </li>
                            <li>
                                <select required="required" name="zoneName" class="form-control bor1" v-model="zoneActive" @change="getCurrentZone($event)" placeholder="县\区">
                                    <option value="" disabled selected   >区</option>
                                    <option v-for="(zone,index) in zones" :value="zone.zoneName" :key="index">
                                        {{zone.zoneName}}
                                    </option>

                                </select>
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <span style="vertical-align: top;padding-top: 7px;" class="label-span"><span class="required">*</span> <label>详细地址:</label></span>
                        <ul class="list-inline">
                            <li><textarea required="required" name="street" multiple class="form-control" rows="2"
                                          v-model="street" placeholder="请输入详细地址"></textarea>
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <span class="label-span"><span class="required">*</span> <label>邮政编码:</label></span>
                        <ul class="list-inline">
                            <li><input  name="postcode" required="required" type="text" class="form-control" v-model="postcode" placeholder="请填写邮编"></li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <span class="label-span"><span class="required">*</span> <label>收货人姓名:</label></span>
                        <ul class="list-inline">
                            <li ><input required="required" pattern="^.{2,25}$" name="customerName" v-model="customerName" id="f19" type="text" class="form-control" placeholder="收货人姓名"></li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <span class="label-span"><span class="required">*</span> <label>手机号码:</label></span>
                        <ul class="list-inline">
                            <li ><input type="text" required="required" pattern="^1\d{10}$" name="phone" class="form-control"
                                                  v-model="phone" placeholder="请输入手机号" style="font-size: 7px;"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="dialog_footer">
                <button type="submit" class="btn btn-orange" >确定</button>
                <button class="btn btn-gray js-closewin-btn">取消</button>
            </div>
        </form>
    </div>
</div>
<!-- 修改地址弹窗 end -->

<!-- 添加地址弹窗 -->
<div style="display: none;">
    <div class="address-form cus-win-model js-md-180417-login-cj" id="addressAdd">
        <form class="form-horizontal" method="post" id="addAddressForm" @submit.prevent="addAddress">
        <div class="dialog_header">
            <span class="dialog_title">添加收货地址</span>
            <span class="cus-win-modelclose js-closewin-btn"><i class="glyphicon glyphicon-remove font-14"></i></span>
        </div>
        <div class="address-form-content" >
            <div id="js_add_address_form" class="form-ele-box">
                <div class="alert alert-danger" v-show="hasError">
                    <i class="fa fa-exclamation-triangle"></i> <span v-text="message" >邀请码错误！</span>
                </div>
                <div class="form-group">
                    <span class="label-span"><span class="required">*</span> <label>地址信息:</label></span>
                    <ul class="list-inline ">
                        <li>
                            <select required="required" name="provinceName" class="form-control bor1"  v-model="provinceActive" @change="getCitys($event)" >
                                <option value=""  disabled selected   >省</option>
                                <option v-for="(province,index) in provinces"  :value="province.provinceName"  :key="index"
                                >
                                    {{province.provinceName}}
                                </option>
                            </select>
                        </li>
                        <li>
                            <select required="required" name="cityName" class="form-control bor1" v-model="cityActive" @change="getZones($event)" >
                                <option value=""  disabled selected   >市</option>
                                <option v-for="(city,index) in citys" :value="city.cityName"  :key="index">
                                    {{city.cityName}}
                                </option>
                            </select>
                        </li>
                        <li>
                            <select required="required" name="zoneName" class="form-control bor1" v-model="zoneActive" @change="getCurrentZone($event)" placeholder="县\区">
                                <option value="" disabled selected   >区</option>
                                <option v-for="(zone,index) in zones" :value="zone.zoneName" :key="index">
                                    {{zone.zoneName}}
                                </option>

                            </select>
                        </li>
                    </ul>
                </div>
                <div class="form-group">
                    <span style="vertical-align: top;padding-top: 7px;" class="label-span"><span class="required">*</span> <label>详细地址:</label></span>
                    <ul class="list-inline">
                        <li><textarea required="required" name="street" multiple class="form-control" rows="2"
                           v-model="street" placeholder="请输入详细地址"></textarea>
                        </li>
                    </ul>
                </div>
                <div class="form-group">
                    <span class="label-span"><span class="required">*</span> <label>邮政编码:</label></span>
                    <ul class="list-inline">
                        <li><input name="postcode" required="required" type="text" class="form-control" v-model="postcode" placeholder="请填写邮编"></li>
                    </ul>
                </div>
                <div class="form-group">
                    <span class="label-span"><span class="required">*</span> <label>收货人姓名:</label></span>
                    <ul class="list-inline">
                        <li ><input required="required" pattern="^.{2,25}$" name="customerName" v-model="customerName" type="text" class="form-control" placeholder="收货人姓名"></li>
                    </ul>
                </div>
                <div class="form-group">
                    <span class="label-span"><span class="required">*</span> <label>手机号码:</label></span>
                    <ul class="list-inline">
                        <li ><input type="text" required="required" pattern="^1\d{10}$" name="phone" class="form-control"
                                              v-model="phone" placeholder="请输入手机号" style="font-size: 7px;"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="dialog_footer">
            <button type="submit" class="btn btn-orange" >确定</button>
            <button class="btn btn-gray js-closewin-btn">取消</button>
        </div>
        </form>
    </div>
</div>
<!-- 添加地址弹窗 end -->

<!-- 选择地址弹窗 -->
<div style="display: none;">
    <div class="address-form cus-win-model js-md-180417-login-cj" id="select-address-tip">
        <div class="address-form-content" >
            <div style="margin: 30px auto 10px;text-align: center;font-size: 30px;">请选择地址</div>
        </div>
        <span class="cus-win-modelclose js-closewin-btn"><i class="glyphicon glyphicon-remove font-14"></i></span>
    </div>
</div>
<!-- 选择地址 end -->

</body>
<script src="my/js/header.js"></script>
<script src="my/js/headerApp.js"></script>
<script src="js/order.js"></script>
<script src="js/checkout.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
</html>